/**
 * 路径移动demo案例
 */

import * as Cesium from "cesium";
import * as EasyCesium from "@xhymf1992/easy-cesium";

export async function startPathAnimation() {

    let position = Cesium.Cartesian3.fromDegrees(120, 30, 1000);
    
    // 构建gltf模型
    {
        let options = {
            id: "model-entity", // entity对象id，具有唯一性，必填
            name: "model-entity", // entity的名称，可选，默认为空
            show: true, // 是否显示，可选，默认显示
            heading: 0, // 绕局部坐标系Z轴顺时针旋转角度(弧度制)，可选，默认为0
            pitch: 0, // 绕局部坐标系Y轴顺时针旋转角度(弧度制)，可选，默认为0，朝向正北
            roll: 0, // 绕局部坐标系X轴逆时针旋转角度(弧度制)，可选，默认为0
            coordAxisShow: true, // 是否显示模型局部坐标系(初始为X轴朝向正东，Y轴朝向正北，Z轴朝向垂直地表向上)，可选，默认为false
            coordAxisLength: 10000, // 坐标轴长度，可选，默认为500
            coordAxisWidth: 5, // 坐标轴宽度，可选，默认为5
            position: position, // 模型坐标，必填
            uri: "https://hz.gridworld.com.cn:50443/te3/di/get_file/Cesium_Man.glb/", // 模型链接，必选
            scale: 5000, // 模型缩放大小，可选，默认为1
            minimumPixelSize: 0.0, // 模型最小像素大小，可选，默认为0
            runAnimations: true, // 是否启动动画，可选，默认为true
            clampAnimations: true, // 在没有关键帧的持续时间内是否保持最后一个动作，可选，默认为true
            heightReference: 1, // 高程类型：0-海拔；1-贴在地表或3dtiles；2-相对于地表或3dtiles；3-贴在地表；4-相对于地表；5-贴在3dtiles；6-相对于3dtiles，可选，默认为0
            silhouetteColor: "rgba(255,0,0,1)", // 轮廓的颜色，可选，默认为红色
            silhouetteSize: 0.0, // 轮廓大小，可选，默认为0 (不显示轮廓)
            color: "rgba(255,255,255,1.0)", // 模型颜色，该颜色将与模型自身的颜色进行混合，可选，默认为白色
            colorBlendMode: 0, // 混合模式：0-高亮（颜色相乘）；1-替换（覆盖原有颜色）；2-比例混合. 可选，默认为0
            colorBlendAmount: 0.5, // 混合模式为2时，该值表示输入颜色的占比(0.0-1.0)，当为1时为覆盖. 可选，默认为0.5
            constant: false, // 是否是静态的，可选，默认为是，当为false时，参数变为时变类型，适用于经常变化的情况
            viewer: window.viewer // cesium视图对象，必填
        };
    
        // @ts-ignore
        window.model = new EasyCesium.ModelEntity(options);
        //@ts-ignore
        window.model.init();
        //@ts-ignore
        window.model.flyTo();
    }

    // 构建标注
    {
        const image = await Cesium.Resource.fetchImage({
            url: "https://hz.gridworld.com.cn:50443/te3/di/get_file/location.png/"
        })
    
        let options = {
            id: "label-entity", // entity对象id，具有唯一性，必填
            name: "label-entity", // entity的名称，可选，默认为空
            show: true, // 是否显示，可选，默认显示
            position: position, // 图标位置，必填
    
            image: image, // 图标数据，可选，默认为空
            imageShow: true, // 是否显示图标，可选，默认显示
            imageColor: "rgba(255,0,0,1)", // 图标的颜色，可选，默认为rgba(255, 255, 255, 1)
            imageScale: 1.0, // 图标的缩放值，可选，默认为1
    
            text: "位置", // 文本内容，可选，默认为空
            textShow: true, // 是否显示文本，可选，默认显示
            textColor: "rgba(0,255,0,1)", // 文本颜色，可选，默认为rgba(255, 255, 255, 1)
            textScale: 1.0, // 文本的缩放值，可选，默认为1
            textOutlineColor: "rgba(0,0,0,1)", // 文本边框颜色，可选，默认为rgba(0, 0, 0, 1)
            textOutlineWidth: 5, // 文本边框宽度，可选，默认为0，最大为8
            textHorizontalOffset: 10, // 文本在屏幕中的水平像素偏移距离:[朝右，朝上]，可选，默认为0
            textVerticalOffset: 10, // 文本在屏幕中的垂直像素偏移距离:[朝右，朝上]，可选，默认为0
    
            distanceDisplayCondition: [0, 1e6], // 图元在该视角距离内可见，其他距离不可见：[near, far]，可选，默认不启用
            disableDepthTestDistance: 0, // 视角离标注的距离小于此值时关闭深度检测，可选，默认为0
            
            constant: false, // 是否是静态的，可选，默认为是，当为false时，参数变为时变类型，适用于制作动画
            viewer: window.viewer // cesium视图对象，必填
        };
    
        // @ts-ignore
        window.label = new EasyCesium.LabelEntity(options);
        //@ts-ignore
        window.label.init();
        //@ts-ignore
        window.label.flyTo();
    }


    // 设置路径动画参数
    let positions = [
        Cesium.Cartesian3.fromDegrees(120, 30, 1000),
        Cesium.Cartesian3.fromDegrees(121, 30, 1000),
        Cesium.Cartesian3.fromDegrees(121, 31, 1000)
    ]

    let speed = 20000;

    let animationOptions = {
        positions, // 路径坐标点集，必填
        speed, // 移动速度，单位m/s，可选，默认为1
        //@ts-ignore
        entity: window.model, // 沿着路径移动的实体，必填
        // entity: window.label, // 沿着路径移动的实体，必填

        startCallbackFunc: (animation: EasyCesium.PathAnimation) => {
            console.log("start", animation);
        }, // 动画启动时的回调函数，可选，默认为空。回调函数第一个参数为当前动画实例

        pauseCallbackFunc: (animation: EasyCesium.PathAnimation) => {
            console.log("pause", animation);
        }, // 动画暂停时的回调函数，可选，默认为空。回调函数第一个参数为当前动画实例

        stopCallbackFunc: (animation: EasyCesium.PathAnimation) => {
            console.log("stop", animation);

            // 以下设置可实现循环播放
            //@ts-ignore
            animation.__playStatus = 1;
        } // 动画播放时的回调函数，可选，默认为空。回调函数第一个参数为当前动画实例
    }

    // 构建路径动画实例
    //@ts-ignore
    window.animation = new EasyCesium.PathAnimation(animationOptions);

    // 播放动画
    //@ts-ignore
    // window.animation.startAnimation();

    // 修改移动速度
    //@ts-ignore
    // window.animation = 2000;

    // 暂停动画
    //@ts-ignore
    // window.animation.pauseAnimation();

    // 停止动画
    //@ts-ignore
    // window.animation.stopAnimation();
    
}